<template>
    <div class="body">
    
    <div class="top">
        <a href="javascript:history.go(-1)">
            <em><img src="../../images/return.png"></em>

        </a>
        <p>
            <i><img src="../../images/search.png"></i>
            <input type="text" v-model="inputv" placeholder="请输入搜索关键词">
        </p>
        <span v-on:click='add()'>搜索</span>			
    </div>
    <h2>热门搜索</h2>
    <span class="sp1"></span>
    <h2>历史记录</h2>
    <ul class="addh">
        <li v-for="(v,i) in hlist">{{v}}</li>
    </ul>

    <span class="clearh" @click="clear()">
        清除历史
    </span>



    
    </div>
</template>

<script>
export default{
        data(){        
            return {  
                inputv:'',         
                hlist:[],
                tablelist:{},
            }
        },
        methods:{
            add(){
                if(this.inputv!=null&&this.inputv!=''){
                    var con=this.inputv;
                    this.hlist.push(con);
                }
                
            },
            clear(){
                var ary=this.hlist;
               ary.splice(0,ary.length);
            }
        },
        mounted(){
            
            this.$http.get('./data/search.json')
            .then((response)=>{
                this.tablelist=response.data.tables;
                
            })
            .catch(function (error) {
		     // handle error
		     console.log(error);
		   })
		   .then(function () {
		     // always executed
		   });
        }
    }
</script>

<style>

    .body {
        width:100%;
        height:100vh;
        overflow: hidden;
        background-color: #F5F5F5
        } 

    .top{
		height: 2.2rem;
        width: 100%;
        position: fixed;
        top: 0px;
        display: flex;
        justify-content: space-between;
        padding: 5px 0px;
        font-size: 1rem;
        text-align: center;
        background:white;
        color: gray;
	}
	.top>a,.top>span{
        width: 3.5rem;
        line-height: 2rem;
        color: black;
        display: block;
        display: flex;
        align-items: center;
	}
	.top>a>em{
		width: 1.5rem;
		height: 1.5rem;
        margin-top:0.2rem;
        margin-left:20px;
		display: block;
	}
	.top>a>em>img{
		width: 100%;
		height: 100%;
	}
	.top>p{
        border: 1px solid #c7c7c7;
        border-radius: 3px;
        width: 60%;
        display: block;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
	}
	.top>p>i{
        position: absolute;
        left: 0.2rem;
        width: 1.5rem;
        height: 1.5rem;
	}
	.top>p>i img{
		width: 100%;
		height: 100%；
	}
	.top>p>input{
		width: 10rem;
        float: left;
        margin-left: 2rem; 
        border:none;
        outline: none;
	}
    h2{
        width: 100%;
        height: 2rem;
        margin-top: 4rem;
        margin-left: 20px;
        font-size: 1rem;
    }
    .sp1{
        width: 1.5rem;
        height: 0.5rem;
        margin-left: 20px;
        display: block;
        border-radius: 25%;
        background: white;
    }

    /*历史记录内容*/
	.addh{
		width: 100%;
		padding: 0px 20px;
        overflow: hidden;
	}
	.addh>li{
        background: white;
        padding: 5px 10px;
        font-size: 0.8rem;
        float: left;
        margin: 10px 5px;
	}
   .clearh{
   		margin-top: 60px;
		font-size: 1rem;
		height: 3rem;
		background: #EEE;
		border-radius: 3px;
		width: 60%;
		display: block;
        margin: 40px auto;
		display: flex;
		align-items: center;
		justify-content: center;
   }

</style>




